<template>
  <div class="page">
    <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose"
      @select="handleSelect"
    >
      <el-menu-item index="1">
        <el-icon><User /></el-icon>
        <template #title>个人信息</template>
      </el-menu-item>
      <el-menu-item index="2">
        <el-icon><Histogram /></el-icon>
        <template #title>访客统计</template>
      </el-menu-item>
      <el-menu-item index="3">
        <el-icon><document /></el-icon>
        <template #title>发布管理</template>
      </el-menu-item>
      <el-menu-item index="4">
        <el-icon><setting /></el-icon>
        <template #title>权限管理</template>
      </el-menu-item>
      <el-menu-item index="5" @click="loginOut">
        <el-icon><SwitchButton /></el-icon>
        <template #title>退出账号</template>
      </el-menu-item>
    </el-menu>
    <div class="right">
      <div v-if="actived == 1"><UpdatePwd /></div>
      <div v-if="actived == 2">
        <Visitor />
      </div>
      <div v-if="actived == 3"><MyPublish /></div>
      <div v-if="actived == 4">
        <Settings v-if="store.userLevel<3" />
        <div v-else style="margin: 50px;">运营人员暂无其他权限</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "../stores/system";
const store = useStore();
const router = useRouter();
const actived = ref(1);
const isCollapse = ref(false);
const handleOpen = (key, keyPath ) => {
  //   console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
  //   console.log(key, keyPath);
};
const handleSelect = (key, keyPath, item) => {
  console.log(key, keyPath, item);
  actived.value = key;
};
onBeforeMount(() => {
  // if (!store.isLogin) {
  //   router.push({ path: "/login" });
  // }
});

//退出
const loginOut = () => {
  sessionStorage.removeItem("token");
  sessionStorage.removeItem("userId");
  sessionStorage.removeItem("userName");
  store.isLogin = false;
  router.push({ path: "/login" });
};
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 100%;
}
.el-scrollbar__view {
  height: 100%;
}
.page {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
}
.right {
  height: 100%;
  width: 100%;
  /* padding: 20px 20px 0 20px; */
  /* background-color: white; */
}
</style>
